<template>
  <div class="box">
    <div class="title"><p>年度游客量对比</p></div>
    <!--图形图表的容器-->
    <div class="charts" ref="EchartsVc"></div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
import {EChartsType} from "echarts";

let EchartsVc = ref<any>();

onMounted(() => {
  let mychart: EChartsType = echarts.init(EchartsVc.value);
  mychart.setOption({
    title: {
      text: '散点图',
      left: '40%',
      textStyle: {
        color: 'yellowgreen'
      }
    },
    grid: {
      top: 20,
      left: 35,
      right: 20,
      bottom: 30
    },
    xAxis: {type: 'category'},
    yAxis: {
      axisLabel: {show: true},
      axisLine: {show: true},
      splitLine: {show: false}
    },
    series: [
      {
        type: 'scatter',
        data: [33, 41, 21, 13, 85, 13, 47],
        symbol: 'arrow',
        symbolSize: 20,
        color: 'skyblue',
        label: {
          show: true,
          position: 'top',
          color: 'hotpink'
        }
      }
    ],
    //提示框组件
    tooltip: {
      backgroundColor: 'white'
    }

  })
})

</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: rgba(168, 178, 177, 0.35);

  .title {
    margin-top: 20px;
    margin-left: 20px;

    p {
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: calc(100% - 40px);
  }
}

</style>